<template>
	<scroll-view style="height: 100vh;" scroll-y :scroll-into-view="scroll" @scroll="toScroll">
		<view class="product-details pb-150">
			<!-- 头部 -->
			<view class="f ai-c jc-s-b ph-32 pv-12 hearder" :style="{ top: statusBarHeight + 'px' }" v-if="show">
				<view class="w-64 h-64 b-64 f ai-c jc-c black" @click="toBack">
					<image src="http://cwht.ricecs.cn/app/shop/back-b.png" class="w-32 h-32"></image>
				</view>
				<view class="f ai-c mp-weixin">
					<view class="w-64 h-64 b-64 f ai-c jc-c mr-20 black" @click="handleCollect">
						<image :src="isCollect ? collectY : collectB" class="w-32 h-32"></image>
					</view>
					<view class="w-64 h-64 b-64 f ai-c jc-c black" @click="handleShare">
						<image src="http://cwht.ricecs.cn/app/shop/share-b.png" class="w-32 h-32"></image>
					</view>
				</view>
			</view>
			<!-- 滚动头部 -->
			<view :style="{ paddingTop: statusBarHeight + 'px' }" class="roll-hearder" v-if="!show">
				<view class="h-88 ph-32 f ai-c jc-s-b">
					<view class="f ai-c">
						<image src="../../static/back.png" class="w-40 h-33 mr-32" @click="toBack">></image>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'shop' ? 'active' : ''" @click="toRoll('shop')">商品
						</view>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'info' ? 'active' : ''" @click="toRoll('info')">详情
						</view>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'evaluate' ? 'active' : ''"
							@click="toRoll('evaluate')">评价</view>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'recommend' ? 'active' : ''"
							@click="toRoll('recommend')">推荐</view>
					</view>
					<view class="f mp-weixin">
						<image :src="isCollect ? collectY : collectH" class="w-40 h-40 mr-32" @click="handleCollect"></image>
						<image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40" @click="handleShare"></image>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<Banner :detail="detail" ref="banner" id="shop" />
			<!-- 商品信息 -->
			<view ref="shop" class="info ph-20 mt-20">
				<view class="w-f pv-32 ph-32 b-24 background-white">
					<view class="f">
						<view class="fs-28 fw-600 text-color8 text-position">预估到手价</view>
						<view class="fs-36 ml-8 text-color8 text-psymbol">¥</view>
						<view class="fs-48 fw-600 text-color8">{{ detail.price }}</view>
						<view class="fs-24 text-color3 old-price ml-16 text-position">原价 ¥{{ detail.originalPrice }}</view>
					</view>
					<!-- <view class="mr-16"><view class="h-32 b-4 ph-8 preferential fs-22 text-color8">满20减1</view></view> -->
					<view class="fs-36 fw-600 text-color4 mt-25">{{ detail.name }}</view>
				</view>
				<view class="w-f pv-32 ph-32 b-24 background-white mt-20">
					<view class="f ai-c jc-s-b" @click="showSpec('pay')">
						<view class="f ai-c" @click="spec">
							<view class="fs-26 text-color3">选择</view>
							<view class="ml-28 fs-26 text-color4">已选 {{ detail.skus[specCurt].name }}</view>
						</view>
						<u-icon name="arrow-right" color="#999999" size="10"></u-icon>
					</view>
					<view class="f ai-c jc-s-b mt-32" @click="toAddress">
						<view class="f ai-c">
							<view class="fs-26 text-color3">配送</view>
							<view class="ml-28 fs-26 text-color4">{{ address ? address.areaName + address.detailAddress : '请选择地址' }}
							</view>
						</view>
						<u-icon name="arrow-right" color="#999999" size="10"></u-icon>
					</view>
					<view class="f ai-c jc-s-b mt-32">
						<view class="f ai-c">
							<view class="fs-26 text-color3">运费</view>
							<view class="ml-28 fs-26 text-color8">¥{{ detail.freight == 0 ? '免运费（请以订单提交为准）' : detail.freight }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 详情 -->
			<Info :detail="detail" :shopData="shopData" ref="info" id="info" />
			<!-- 评价 -->
			<Evaluate ref="evaluateRef" id="evaluate" :detail="detail" />
			<!-- 推荐好货 -->
			<Recommend id="recommend" />
			<!-- 分享 -->
			<Share ref="share" :detail="detail" />
			<!-- 底部 -->
			<view class="foot">
				<view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
					<view class="f ai-c jc-s-b h-100 ph-40">
						<view class="f ai-c jc-s-b f1 mr-30">
							<view class="f ai-c fd-c" @click="toShop">
								<image src="http://cwht.ricecs.cn/app/shop/shop-h.png" class="w-32 h-32"></image>
								<view class="fs-20 text-color4 mt-8"> 店铺</view>
							</view>
							<view class="f ai-c fd-c">
								<button open-type="contact">
									<image src="http://cwht.ricecs.cn/app/shop/kf-h.png" class="w-32 h-32 mt-4"></image>
									<view class="fs-20 text-color4 mt-24 fw-400"> 客服</view>
								</button>
							</view>
							<view class="f ai-c fd-c" @click="toShopCart" style="position: relative;">
								<view class=" h-30 b-30 f ai-c jc-c" style="color:#fff;font-size: 24rpx;min-width: 30rpx;position: absolute;
		background-color: red;
		right: -10rpx;
		top: -10rpx;" v-if="cartNum>0">{{cartNum>99?'99+':cartNum}}</view>
								<image src="http://cwht.ricecs.cn/app/shop/cart-h.png" class="w-32 h-32"></image>
								<view class="fs-20 text-color4 mt-8"> 购物车</view>
							</view>
						</view>
						<view class="f">
							<view class="add-cart w-200 h-68 fs-28 fw-600 text-color mr-16 b-68 f ai-c jc-c"
								@click="showSpec('cart')">
								加入购物车</view>
							<view class="buy w-204 h-72 fs-28 fw-600 text-color5 b-68 f ai-c jc-c" @click="showSpec('pay')">立即购买
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 规格 -->
			<u-popup :show="specShow" round="24rpx">
				<view class="ph-32 pt-32 specBox">
					<view class="close" @click="specShow = false"> <u-icon name="close" color="#1A1A1A" size="14"></u-icon></view>
					<view class="f ai-c">
						<image :src="detail.picUrl" mode="widthFix" class="w-180 h-180 b-12 mr-28"></image>
						<view class="f fd-c f1">
							<view>
								<text class="fs-28 fw-600 text-color8 mr-8">预估到手价</text>
								<text class="fs-36 text-color8 mr-2">¥</text>
								<text class="fs-48 fw-600 text-color8">{{ detail.skus[specCurt].price }}</text>
							</view>
							<view class="mt-12 fs-24 text-color3 old-price">原价 ¥{{ detail.originalPrice }}</view>
							<view class="mt-12 fs-24 text-color4">已选：{{ detail.skus[specCurt].name }}</view>
						</view>
					</view>
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in detail.skus" :key="index" class="w-339 h-440 mr-16 spec ph-8 pv-8 b-24 mt-48"
							:class="specCurt == index ? 'active' : ''" @click="changeCurt(index)">
							<image :src="item.picUrl" mode="widthFix" class="w-327 h-328 b-24"></image>
							<view class="fs-28 fw-600 text-color4 mt-16 f jc-c text">{{ item.name }}</view>
						</view>
					</u-scroll-list>
					<view class="f ai-c jc-s-b mb-40">
						<view class="f ai-c pb-40">
							<view class="fs-32 fw-600 text-color4 mr-12">数量</view>
							<view class="fs-24 text-color3">1件起购，最多可购买{{ detail.skus[specCurt].stock }}件</view>
						</view>
						<u-number-box v-model="number" :disablePlus="number == detail.skus[specCurt].stock"
							:disableMinus="number == 1" :min="1" :max="detail.skus[specCurt].stock" integer
							:disabledInput="number >= detail.skus[specCurt].stock"></u-number-box>
					</view>
					<view class="ph-8 pv-20 btn">
						<u-button text="确定" color="#FABB3C" shape="circle" @click="submit"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</scroll-view>

</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { spuGetDetail, storeDetail,getCount } from '@/services/api/shop/index';
	import { addressGetDefault } from '@/services/api/address';
	import { favoriteExits, favoriteCreate, favoriteDelete } from '@/services/api/shop/collect';
	import { cartAdd } from '@/services/api/shop/cart';
	import { onPageScroll, onReady, onLoad, onShow } from '@dcloudio/uni-app';
	import collectB from '@/static/shop/collect-b.png';
	import collectH from '@/static/shop/collect-h.png';
	import collectY from '@/static/shop/collect-y.png';
	import Banner from './Banner.vue';
	import Info from './Info.vue';
	import Evaluate from './Evaluate.vue';
	import Recommend from '@/components/recommend/index.vue';
	import Share from './Share.vue';
	import { useAuthStore } from '@/store/modules/auth';
	const authStore = useAuthStore();
	const show = ref(true);
	const id = ref('');
	const cartNum = ref(0)
	//规格
	const specShow = ref(false);
	const specCurt = ref(0);
	const specType = ref();
	const number = ref(1);
	//详情
	const detail = ref<any>();
	//是否收藏
	const isCollect = ref(false);
	//地址
	const address = ref('');
	//店铺详情
	const shopData = ref('');
	//滚动模块
	const banner = ref();
	const shop = ref();
	const info = ref('');
	const evaluate = ref();
	const evaluateRef = ref();
	const moduleId = ref('');
	const shopModule = ref(0);
	const infoModule = ref(0);
	const evaluateModule = ref(0);
	const recommendModule = ref(0);
	const scroll = ref('')
	//分享
	const share = ref();
	onLoad((options : any) => {
		id.value = options.id;
		getDetail();
		getNumber()
	});
	onShow(() => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ffffff',
		});
		let pages = getCurrentPages();
		let currPage : any = pages[pages.length - 1];
		let addressData = currPage.data.addressData;
		//选择地址
		if (addressData) {
			address.value = addressData;
		}
	});
	async function getNumber() {
		const res = await getCount()
		cartNum.value = Number(res.data)
	}
	function toBack() {
		uni.navigateBack();
	}
	// 分享
	const handleShare = () => {
		share.value.getShow(true);
	};
	//提交
	async function submit() {
		if (detail.value.skus[specCurt.value].stock == 0) {
			uni.showToast({
				icon: 'none',
				title: '库存不足'
			})
			return
		}
		if (specType.value === 'cart') {
			//购物车
			await cartAdd({ skuId: detail.value.skus[specCurt.value].id, count: number.value });
			uni.showToast({
				title: '添加成功',
			});
			specShow.value = false;
			getNumber()
		} else {
			//立即购买
			const list = [
				{
					shop: shopData.value.name,
					goods: [
						{
							sku: detail.value.skus[specCurt.value],
							count: number.value,
							spu: {
								secondCategoryId: detail.value.secondCategoryId,
								picUrl: detail.value.picUrl,
								id: detail.value.id,
								name: detail.value.name,
							},
						},
					],
				},
			];
			authStore.setOrderGoods(list);
			uni.navigateTo({
				url: '/pages_shop/confirmOrder/index',
			});
		}
	}
	//切换规格
	const changeCurt = (data : number) => {
		specCurt.value = data;
		detail.value = detail.value.sku[specCurt.value];
	};
	//显示规格
	function showSpec(type : string) {
		specShow.value = true;
		specType.value = type;
	}
	//跳转购物车
	const toShopCart = () => {
		uni.navigateTo({
			url: '/pages_shop/shopCart/index',
		});
	};
	//跳转店铺
	function toShop() {
		uni.navigateTo({
			url: `/pages_shop/business/index?id=${detail.value.storeId}`,
		});
	}
	//选择地址
	function toAddress() {
		uni.navigateTo({
			url: `/pages_mine/myAddress?type=select`,
		});
	}
	//获取默认地址
	async function getDefaultAddress() {
		const { data } = await addressGetDefault({});
		address.value = data;
	}
	//详情
	async function getDetail() {
		const { data } = await spuGetDetail({ id: id.value });
		if (data.videoUrl) {
			data.picUrl += ',' + data.videoUrl
		}
		data.picUrl = data.picUrl.split(',');

		detail.value = data;


		getDefaultAddress();
		getFavoriteExits();
		getShop();
		evaluateRef.value.getData(id);
	}
	//检查是否收藏
	async function getFavoriteExits() {
		const { data } = await favoriteExits({ id: id.value, collectionType: 1 });
		isCollect.value = data;
	}
	//店铺详情
	async function getShop() {
		const { data } = await storeDetail({ storeId: detail.value.storeId });
		shopData.value = data;
	}
	//收藏/取消商品
	async function handleCollect() {
		isCollect.value = !isCollect.value;
		if (isCollect.value) {
			await favoriteCreate({ id: id.value, collectionType: 1 });
		} else {
			await favoriteDelete({ id: id.value, collectionType: 1 });
		}
	}
	//头部底部
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let safeArea = systemInfo.safeArea;
	let screenHeight = systemInfo.screenHeight;
	let safeAreaBottom = screenHeight - safeArea.bottom;
	//滚动
	onReady(() => {
		uni.createSelectorQuery()
			.select('#shop')
			.boundingClientRect((rect : any) => {
				shopModule.value = rect.top;
				console.log('商品：', rect);
			})
			.exec();
		uni.createSelectorQuery()
			.select('#info')
			.boundingClientRect((rect : any) => {
				infoModule.value = rect.top;
				console.log('详情：', rect);
			})
			.exec();
		uni.createSelectorQuery()
			.select('#evaluate')
			.boundingClientRect((rect : any) => {
				evaluateModule.value = rect.top;
				console.log('评价：', rect);
			})
			.exec();
		uni.createSelectorQuery()
			.select('#recommend')
			.boundingClientRect((rect : any) => {
				recommendModule.value = rect.top;
				console.log('推荐：', rect);
			})
			.exec();
	});
	function toScroll(e) {
		if (e.scrollTop < 100) {
			show.value = true;
		} else {
			show.value = false;
		}

	}
	// onPageScroll((e) => {
	// 	console.log(e)
	// 	if (e.scrollTop < 100) {
	// 		show.value = true;
	// 	} else {
	// 		show.value = false;
	// 	}
	// 	if (e.scrollTop > 100 && e.scrollTop < shopModule.value) {
	// 		moduleId.value = 'shop';
	// 	} else if (e.scrollTop > shopModule.value && e.scrollTop < infoModule.value) {
	// 		moduleId.value = 'info';
	// 	} else if (e.scrollTop > infoModule.value && e.scrollTop < evaluateModule.value) {
	// 		moduleId.value = 'evaluate';
	// 	} else if (e.scrollTop > evaluateModule.value && e.scrollTop < recommendModule.value) {
	// 		moduleId.value = 'recommend';
	// 	}
	// });
	const toRoll = (type : string) => {
		scroll.value = type
		moduleId.value = type
		// if (type == 'shop') {
		// 	uni.pageScrollTo({
		// 		scrollTop: shopModule.value - 100,
		// 		duration: 200,
		// 	});
		// } else if (type == 'info') {
		// 	uni.pageScrollTo({
		// 		scrollTop: infoModule.value - 100,
		// 		duration: 200,
		// 	});
		// } else if (type == 'evaluate') {
		// 	uni.pageScrollTo({
		// 		scrollTop: evaluateModule.value - 100,
		// 		duration: 200,
		// 	});
		// } else if (type == 'recommend') {
		// 	uni.pageScrollTo({
		// 		scrollTop: recommendModule.value - 100,
		// 		duration: 200,
		// 	});
		// }
	};
</script>
<style lang="scss" scoped>
	.specBox {
		background: #fff;
		position: relative;
		border-radius: 24rpx 24rpx 0 0;

		.btn {
			border-top: 1px solid #f5f5f5;
		}

		::v-deep .u-button__text {
			font-size: 36rpx !important;
			font-weight: 600 !important;
		}

		::v-deep .u-button {
			height: 96rpx !important;
		}

		.spec {
			background: #f8f8f8;
			border: 2rpx solid #f8f8f8;
		}

		.active {
			background: #fff8eb;
			border: 2rpx solid #fabb3c;

			.text {
				color: #fabb3c;
			}
		}

		.close {
			position: absolute;
			right: 34rpx;
			top: 34rpx;
		}

		.old-price {
			text-decoration: line-through;
		}
	}

	::v-deep button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		line-height: 0;
		width: 40rpx;
		height: 80rpx;
	}

	.foot {
		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;

			.add-cart {
				border: 2rpx solid #fabb3c;
			}

			.buy {
				background: #fabb3c;
			}

			::v-deep .u-button__text {
				font-size: 28rpx !important;
				font-weight: 600 !important;
				color: #fff;
			}

			::v-deep .u-button {
				height: 72rpx !important;
				padding: 0 !important;
			}
		}
	}

	.info {
		.preferential {
			background: #fff5f5;
			line-height: 32rpx;
			display: inline-block;
		}

		.background-white {
			background: #fff;
		}

		.old-price {
			text-decoration: line-through;
		}

		.text-position {
			position: relative;
			top: 22rpx;
		}

		.text-psymbol {
			position: relative;
			top: 12rpx;
		}
	}

	.product-details {
		background: #f5f5f5;
		min-height: 100vh;

		//#ifdef MP-WEIXIN
		.mp-weixin {
			margin-right: 170rpx;
		}

		//#endif
		.roll-hearder {
			background: #fff;
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 111;

			.active {
				font-weight: 600;
				color: #fac519;
			}
		}

		.to-top {
			border: 1rpx solid #dddddd;
			box-shadow: 0 2rpx 12rpx 0 #0000000f;
			position: fixed;
			right: 20rpx;
			bottom: 200rpx;
			background: #fff;
		}

		// .bot {
		//     position: fixed;
		//     left: 0;
		//     bottom: 0;
		//     background: #fff;
		//     .add-cart {
		//         border: 2rpx solid #fabb3c;
		//     }
		//     .buy {
		//         background: #fabb3c;
		//     }
		//     ::v-deep .u-button__text {
		//         font-size: 28rpx !important;
		//         font-weight: 600 !important;
		//         color: #fff;
		//     }
		//     ::v-deep .u-button {
		//         height: 72rpx !important;
		//         padding: 0 !important;
		//     }
		// }
		.hearder {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 111;
		}

		.black {
			background: rgba(0, 0, 0, 0.4);
		}
	}
</style>